<template>
    <div class="goodslist page">
        <div class="top">
            <div class="nav">
                <i class="cubeic-back" @click="back"></i>
                <div class="title">店铺</div>
                <div class="seat"></div>
            </div>
            <div class="shopInfo">
                <div class="img"><img v-if="shop.avatar" :src="imgH+shop.avatar" alt=""></div>
                <div class="info">
                    {{shop.name}}
                </div>
            </div>
        </div>
        <cube-scroll
                class="con"
                :data="goodsList"
                :options="options"
                ref="scroll"
                @pulling-up="onPullingUp">
            <toplist :showShop="false" :items="goodsList"></toplist>
        </cube-scroll>
    </div>
</template>

<script>
    import {getGoodsListById} from '@/api/shop'
    import toplist from '@/components/top-list'
    export default {
        name: "goodslist",
        components:{toplist},
        data(){
            return{
                page:1,
                options: {
                    pullUpLoad: true,
                },
                goodsList:[],
                shop:{},
                imgH : process.env.VUE_APP_IMG_DOMAIN
            }
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            onPullingUp(){
                getGoodsListById(this.page,this.$route.query.uid).then(res=>{
                    if (this.page==1){
                        this.shop = res.extra.shop
                        this.goodsList = res.data
                    }else {
                        this.goodsList = this.goodsList.concat(res.data)
                    }
                    this.page++
                })
            }
        },
        activated() {
            this.page = 1
            this.goodsList = []
            this.onPullingUp()
            this.$nextTick(()=>{
                this.$refs.scroll.refresh()
                this.$refs.scroll.scrollTo(0,0)
            })
        }
    }
</script>

<style scoped lang="stylus">
    .goodslist
        height 100%
        background  $page-bg
        .top
            background-image url("./image/tbg.png")
            background-size 100%
            background-repeat no-repeat
            padding 10px 15px
            position fixed
            z-index 999
            top 0
            width calc(100% - 30px)
            .nav
                display flex
                justify-content space-between
                font-size 18px
                color #fff
                .seat
                    width 10px
                    height: 18px
            .shopInfo
                margin-top 18px
                display flex
                align-items center
                .img
                    width: 47px
                    height: 47px
                    background-color: #fff
                    img
                        width: 47px
                        height: 47px
                .info
                    color #fff
                    font-size 16px
                    margin-left 10px
        .con
            margin-top 85px
</style>